<template>
  <div class="el-largeGoodsShelves">
    <TableTitle>
      <slot>
        <p>查询条件</p>
      </slot>
    </TableTitle>
    <ConditionSearch style="padding: 5px 0">
      <slot>
        <div class="tableSearch">
          <ul>
            <li>
              <el-input
                ref="saomaInput"
                size="mini"
                v-model="itemCode"
                placeholder="请输入内容"
              ></el-input>
              <span>大件货物编码：</span>
            </li>
            <li>
              <el-input
                size="mini"
                v-model="locatorNo"
                placeholder="请输入内容"
              ></el-input>
              <span>库位号：</span>
            </li>
          </ul>
          <div class="searchBtnBox">
            <el-button size="mini" type="primary" @click="searchBtn"
                >查询</el-button
              >
          </div>
        </div>
      </slot>
    </ConditionSearch>
    <TableTitle>
      <slot>
        <p>编辑信息</p>
      </slot>
    </TableTitle>
    <TopBtn></TopBtn>
    <TableTitle>
      <slot>
        <p>大件区货架信息表</p>
      </slot>
    </TableTitle>
    <Table></Table>
  </div>
</template>
<script>
import TopBtn from "./components/TopBtn.vue";
import Table from "./components/InfoTable.vue";
import ConditionSearch from "../aacomponents/ConditionSearch.vue";
import TableTitle from "../../../../components/TableTitle.vue";
import { sysLgoodsMaterialData } from "@/utils/api.js";
export default {
  name: "largeGoodsShelves",
  components: {
    TopBtn,
    Table,
    ConditionSearch,
    TableTitle,
  },
  data() {
    return {
      itemCode: "",
      locatorNo: "",
      //
      pageSize: 100,
      pageNumber: 1,
    };
  },
  methods: {
    // 查询
    searchBtn() {
      sysLgoodsMaterialData({
        searchParams: {
          itemCode: this.itemCode,
          locatorNo: this.locatorNo,
        },
        pageParameter: {
          rows: this.pageSize,
          page: 1,
        },
      }).then((res) => {
        console.log('大件区物料表格',res);
        if (res.data.retCode == 200) {
          this.$Alert({
            title: "成功",
            message: res.data.message,
            type: "success",
          });
          // 查询成功将数据给Table
          this.$bus.$emit('sysLgmSxTable', res);
        } else {
          this.$Alert({
            title: "失败",
            message: res.data.message,
            type: "error",
          });
        }
      });
    },
  },
  mounted() {
  },
};
</script>
<style scoped>
.tableSearch {
  position: relative;
}
.tableSearch ul {
  overflow: hidden;
}
.tableSearch ul li {
  float: left;
  width: 21%;
  height: 30px;
  line-height: 30px;
  margin-right: 1%;
  margin-bottom: 5px;
  overflow: hidden;
}
.tableSearch ul li span {
  float: right;
}
.tableSearch ul li div {
  float: right;
}
.el-input {
  width: 130px;
}
.searchBtnBox {
  position: absolute;
  top: 0;
  right: 50px;
}
</style>